<!-- 打包管理 - 待打包订单 列表 -->
<template>
  <div class="container">
    <vxe-toolbar
      id="warehouseLocationId"
      :custom="{ storage: true }"
      export
      :refresh="{query: findList}"
    >
      <template v-slot:buttons>
        <div class="btnMargin">
          <el-button @click="findList">查询</el-button>
          <el-button @click="tasksClick" :disabled="tasksShow">打包任务下发</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="640"
      align="center"
      export-config
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      sort-config.remote
      @sort-change="sortField"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      :seq-config="{startIndex: listQuery.pageNum * listQuery.pageSize - listQuery.pageSize}"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="packIssue"
          title="打包任务下发"
          min-width="150"
          sortable
          :formatter="formatterPack"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.packIssue" placeholder="请选择" clearable>
            <el-option
              v-for="item in packIssue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="pasteIssue"
          title="贴单任务下发"
          min-width="150"
          sortable
          :formatter="formatterPaste"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.pasteIssue" placeholder="请选择" clearable>
            <el-option
              v-for="item in pasteIssue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="wavePickingCode" title="波次号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.wavePickingCode" placeholder="波次号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="orderNum" title="拣货顺序" min-width="300" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.orderNumStart"
            placeholder="下限"
            clearable
            style="width: 45%"
            type='number'
          />
          -
          <el-input
            v-model="listQuery.orderNumEnd"
            placeholder="上限"
            clearable
            style="width: 45%"
            type='number'
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.warehouseCode" placeholder="仓库 " style="width:100%" clearable>
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipmentName" title="入驻商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.shipmentCode" clearable filterable placeholder="入驻商">
            <el-option
              v-for="item in options"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shopNick" title="店铺" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.shopNick" clearable filterable placeholder="店铺">
            <el-option
              v-for="item in shopList"
              :key="item.code"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="carrierName" title="承运商" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.carrierName" clearable filterable placeholder="承运商">
            <el-option
              v-for="item in carrierList"
              :key="item.code"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="waybillCode" title="快递单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.waybillCode" placeholder="快递单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="code" title="订单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.code" placeholder="订单号" clearable />
        </template>
      </vxe-table-column>
       <vxe-table-column>
        <vxe-table-column field="isvCode" title="ISV单号" min-width="150" />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.isvCode" placeholder="ISV单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="sourceCode" title="原始单号" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.sourceCode" placeholder="原始单号" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="sourceType"
          title="数据来源"
          min-width="150"
          sortable
          :formatter="formatterSource"
        />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.sourceType" placeholder="请选择" clearable>
            <el-option
              v-for="item in sourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="receiverName"
          title="收货人"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.receiverName"
            placeholder="收货人"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="receiverMobile"
          title="收货人电话"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.receiverMobile"
            placeholder="收货人电话"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="receiverDetailAddress"
          title="收货地址"
          min-width="250"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.receiverDetailAddress"
            placeholder="收货地址"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="60">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <vxe-button
              type="text"
              @click="modelShowHide(scope.row.code, scope.row.type)"
            >
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[10, 15, 20, 50, 100, 500, 1000]"
      @page-change="handlePageChange"
    />
    <!-- 打包任务下发 -->
    <vxe-modal
      v-model="operationTasks"
      title="打包任务下发"
      width="500"
      height="460"
      destroy-on-close
      resize
    >
      <packagingTasks :packageRef="packageRef" :deliveryList="deliveryList" @packagingTasksComplete="
          tasksClicks()
          findList()
        " />
    </vxe-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import packagingTasks from "./components/packagingTasks.vue";
import { waitingPackingOrder, shopList } from '@/api/packManagement/prePackaged'
import { shipments, carrierDropdown } from "@/api/outStorage"; // 入驻商、承运商接口
import { getWarehouse, getWarehouseSpace } from '@/api/basicInfo' // 仓库、库区接口
export default {
  name: "待打包管理",
  components: {
    packagingTasks
  },
  props: {},
  data() {
    return {
      tableData: [],
      sourceList: [
        { value: 'wms', label: '手工创建' },
        { value: 'oms', label: 'OMS' },
        { value: 'qimen', label: '奇门' },
        { value: 'other', label: '其他' }
      ],
      // 状态
      packIssue: [
        { value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      pasteIssue: [
        { value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      orderData: [],
      warehouseData: [],
      options: [],
      gmtCreatedRange:'',
      loading: false,
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      packageRef: {},
      deliveryList: [],
      carrierList: [],
      selectList: [],
      shopList: [],
      tasksShow: true,
      operationTasks: false
    };
  },
  watch: {},
  created() {
    this.findList();
  },
  computed: {

  },
  mounted() {},
  methods: {
    // 排序
    sortField({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
      } else {
        this.listQuery.sortField = "";
      }
      // this.findList();
    },
    // 查询
    findList() {
      this.loading = true
      // 入驻商 - 仓库
      shipments().then(res => {
        this.options = res.data
      })
      carrierDropdown().then(res => {
        this.carrierList = res.data
      })
      shopList().then(res => {
        this.shopList = res.data
      })
      getWarehouse().then(response => {
        this.warehouseData = response.data
      })
      return waitingPackingOrder(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.findList();
    },
    // 查看
    modelShowHide(code,type) {
        this.$router.push({
          path: '/pack/toPackedDetail',
          query: { code: code, type:type }
        })
      },
    formatterPack({ cellValue }) {
      if (cellValue == '0') {
        return '否'
      }
      if (cellValue == '1') {
        return '是'
      }
    },
    formatterPaste({ cellValue }) {
      if (cellValue == '0') {
        return '否'
      }
      if (cellValue == '1') {
        return '是'
      }
    },
    // 数据来源
    formatterSource({ cellValue }){
      if (cellValue == 'wms') {
          return '手工创建'
        }
        if (cellValue == 'oms') {
          return 'OMS'
        }
        if (cellValue == 'qimen') {
          return '奇门'
        }
        if (cellValue == 'other') {
          return '其他'
        }
    },
    // 打包任务下发
    tasksClick() {
      const warehouseCode = this.selectList[0].warehouseCode
      const whetherIssued = this.selectList.every(item => item.warehouseCode === warehouseCode)
      if (!whetherIssued) {
        this.$message.error('只能选择相同仓库任务下发！')
        return
      }
      this.deliveryList = this.selectList
      this.packageRef = {
        packageQuantity: this.selectList.length,
        type: '0'
      }
      this.operationTasks = !this.operationTasks
      this.tasksShow = true
    },
    // 勾选、取消事件
    selectChangeEvent({ checked, records }) {
      this.selectList = this.$refs.xTable.getCheckboxRecords()
      if(this.selectList.length >= 1){
        this.tasksShow = false
      }else {
        this.tasksShow = true
      }
    },
    // 全选与否
    selectAllEvent({ checked, records }) {
      this.selectList = this.$refs.xTable.getCheckboxRecords()
      if(checked) {
        this.tasksShow = false
      }else {
        this.tasksShow = true
      }
    },
    tasksClicks() {
      this.operationTasks = !this.operationTasks
    }
  },
};
</script>
<style scoped>
.container {
  margin: 16px;
}
.inputWidth {
  width: 300px;
}
/* .mytable-footer{
  margin-top: 30px;
} */
/deep/ .vxe-table--render-default .vxe-cell {
  white-space: revert;
}
.btnMarginTop{
  margin-bottom: 10px;
}
/* .btnMargin{
  margin-bottom: 10px;
} */

</style>

